.timeline {
  border-radius: 2px;
  background-color: var(--white-light-2);
  padding: 2rem 5rem;
  box-shadow: var(--shadow-spread-light-2);
  transition: all 0.25s;
  color: var(--black);
}

@media (max-width: 1300px) {
  .timeline {
    padding: 2rem 2rem;
  }
}

@media (max-width: 750px) {
  .timeline {
    padding: 2rem 1rem;
  }
}

.timeline:hover {
  box-shadow: var(--shadow-spread);
  transition: all 0.25s;
}
.timeline ul {
  padding-left: 2rem;

  transform: translateY(-2rem);
  opacity: 0;

  animation: 0.3s swift-Y ease-in-out forwards,
    0.3s fade-in ease-in-out forwards;
}

@media (max-width: 1000px) {
  .timeline {
    padding-left: 1rem;
  }
}

.timeline ul .year {
  font-size: var(--text-xl);
}
.timeline ul .month {
  list-style: disc;
  margin-left: 1rem;
}
.timeline ul .post-link {
  list-style: circle;
  margin-left: 2.5rem;
}

.timeline ul .post-link a {
  color: var(--primary);
  position: relative;
}
.timeline ul .post-link a::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 2px;
  transition: all 0.25s;
}
.timeline ul .post-link a:hover {
  color: var(--primary-light-2);
}
.timeline ul .post-link a:hover::before {
  width: 100%;
  background-color: var(--primary);
  transition: all 0.25s;
}
